<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  #div1 {
    background-color: lightgreen;
    width: 10rem;
    height: 10rem;
    position: relative;
  }
</style>

<body>

  <input id="btn1" onclick="startMove()" type="button" value="开始移动" />

  <div id="div1"></div>

  <script>
    let div1 = document.getElementById("div1")
    let timer = null
    let speed = 30

    function startMove() {
      clearInterval(timer)
      timer = setInterval(() => {
        console.log(div1.offsetLeft);
        if (div1.offsetLeft >= 300) {
          clearInterval(timer)
        } else {
          div1.style.left = div1.offsetLeft + speed + "px"
        }

      }, 20);
    }
  </script>

</body>

</html>